<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<div class="back-btn" @click="goBack">
				<i class="fa fa-arrow-left"></i>
			</div>
			<p>菜品管理</p>
			<div class="add-btn" @click="showAddDialog">
				<i class="fa fa-plus"></i>
			</div>
		</header>
		
		<!-- 搜索部分 -->
		<div class="search-section">
			<div class="search-box">
				<i class="fa fa-search"></i>
				<input 
					type="text" 
					v-model="searchKeyword" 
					placeholder="搜索菜品名称..."
					@input="filterFoodList"
				>
			</div>
		</div>
		
		<!-- 菜品列表部分 -->
		<div class="food-list">
			<div v-if="filteredFoodList.length === 0 && foodList.length === 0" class="empty-state">
				<i class="fa fa-cutlery"></i>
				<p>暂无菜品，点击右上角添加</p>
			</div>
			
			<div v-if="filteredFoodList.length === 0 && foodList.length > 0" class="empty-state">
				<i class="fa fa-search"></i>
				<p>没有找到相关菜品</p>
			</div>
			
			<div v-for="food in filteredFoodList" :key="food.foodId" class="food-item">
				<div class="food-image">
					<img :src="food.foodImg || '/src/assets/sp01.png'" :alt="food.foodName">
				</div>
				<div class="food-info">
					<div class="food-name">{{ food.foodName }}</div>
					<div class="food-desc">{{ food.foodExplain }}</div>
					<div class="food-price">￥{{ food.foodPrice }}</div>
				</div>
				<div class="food-actions">
					<button class="edit-btn" @click="editFood(food)">
						<i class="fa fa-edit"></i>
					</button>
					<button class="delete-btn" @click="deleteFood(food.foodId)">
						<i class="fa fa-trash"></i>
					</button>
				</div>
			</div>
		</div>
		
		<!-- 新增/编辑菜品弹窗 -->
		<div v-if="showDialog" class="dialog-overlay" @click="closeDialog">
			<div class="dialog" @click.stop>
				<div class="dialog-header">
					<h3>{{ isEdit ? '编辑菜品' : '新增菜品' }}</h3>
					<button class="close-btn" @click="closeDialog">×</button>
				</div>
				<div class="dialog-body">
					<div class="form-group">
						<label>菜品名称</label>
						<input 
							type="text" 
							v-model="currentFood.foodName" 
							placeholder="请输入菜品名称"
							maxlength="50"
						>
					</div>
					<div class="form-group">
						<label>菜品介绍</label>
						<textarea 
							v-model="currentFood.foodExplain" 
							placeholder="请输入菜品介绍"
							maxlength="200"
						></textarea>
					</div>
					<div class="form-group">
						<label>菜品价格</label>
						<div class="price-input">
							<span>￥</span>
							<input 
								type="number" 
								v-model="currentFood.foodPrice" 
								placeholder="0.00"
								step="0.01"
								min="0"
							>
						</div>
					</div>

					<div class="form-group">
						<label>菜品图片链接</label>
						<input 
							type="text" 
							v-model="currentFood.foodImg" 
							placeholder="请输入图片链接（可选）"
						>
					</div>
				</div>
				<div class="dialog-footer">
					<button class="cancel-btn" @click="closeDialog">取消</button>
					<button class="confirm-btn" @click="saveFood" :disabled="!isFormValid">
						{{ isEdit ? '保存' : '添加' }}
					</button>
				</div>
			</div>
		</div>
		
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
	name: 'FoodManager',
	data() {
		return {
			businessInfo: {},
			foodList: [],
			filteredFoodList: [],
			searchKeyword: '',
			showDialog: false,
			isEdit: false,
			currentFood: {
				foodId: null,
				foodName: '',
				foodExplain: '',
				foodPrice: '',
				foodImg: ''
			}
		}
	},
	computed: {
		isFormValid() {
			return this.currentFood.foodName.trim() && 
				   this.currentFood.foodPrice && 
				   parseFloat(this.currentFood.foodPrice) > 0;
		}
	},
	mounted() {
		this.loadBusinessInfo();
		this.loadFoodList();
	},
	methods: {
		loadBusinessInfo() {
			// 从session中获取商家信息
			const business = this.$getSessionStorage('business');
			if (business) {
				this.businessInfo = business;
			} else {
				// 如果没有登录信息，跳转到登录页
				alert('请先登录！');
				this.$router.push({ path: '/login' });
			}
		},
		
		loadFoodList() {
			// 调用后端API加载菜品列表数据
			const params = this.$qs.stringify({
				businessId: this.businessInfo.businessId
			});
			this.$axios.post('FoodController/listFoodByBusinessId', params)
				.then(response => {
					this.foodList = response.data || [];
					this.filterFoodList();
				})
				.catch(error => {
					console.error('加载菜品列表失败:', error);
					alert('加载菜品列表失败，请稍后重试！');
				});
		},
		

		
		showAddDialog() {
			this.isEdit = false;
			this.currentFood = {
				foodId: null,
				foodName: '',
				foodExplain: '',
				foodPrice: '',
				foodImg: ''
			};
			this.showDialog = true;
		},
		
		editFood(food) {
			this.isEdit = true;
			this.currentFood = { ...food };
			this.showDialog = true;
		},
		
		closeDialog() {
			this.showDialog = false;
			this.currentFood = {
				foodId: null,
				foodName: '',
				foodExplain: '',
				foodPrice: '',
				foodImg: ''
			};
		},
		
		saveFood() {
			if (!this.isFormValid) {
				alert('请填写完整信息！');
				return;
			}
			
			if (this.isEdit) {
				// 编辑菜品
				const params = this.$qs.stringify({
					foodId: this.currentFood.foodId,
					foodName: this.currentFood.foodName,
					foodExplain: this.currentFood.foodExplain,
					foodPrice: this.currentFood.foodPrice,
					foodImg: this.currentFood.foodImg || '',
					remarks: ''
				});
				this.$axios.post('FoodController/updateFood', params)
					.then(response => {
						if (response.data > 0) {
							alert('菜品修改成功！');
							this.loadFoodList();
							this.closeDialog();
						} else {
							alert('菜品修改失败！');
						}
					})
					.catch(error => {
						console.error('修改菜品失败:', error);
						alert('修改菜品失败，请稍后重试！');
					});
			} else {
				// 新增菜品
				const params = this.$qs.stringify({
					foodName: this.currentFood.foodName,
					foodExplain: this.currentFood.foodExplain,
					foodPrice: this.currentFood.foodPrice,
					foodImg: this.currentFood.foodImg || '',
					businessId: this.businessInfo.businessId,
					remarks: ''
				});
				this.$axios.post('FoodController/saveFood', params)
					.then(response => {
						if (response.data > 0) {
							alert('菜品添加成功！');
							this.loadFoodList();
							this.closeDialog();
						} else {
							alert('菜品添加失败！');
						}
					})
					.catch(error => {
						console.error('添加菜品失败:', error);
						alert('添加菜品失败，请稍后重试！');
					});
			}
		},
		
		deleteFood(foodId) {
			if (confirm('确定要删除这个菜品吗？')) {
				const params = this.$qs.stringify({
					foodId: foodId
				});
				this.$axios.post('FoodController/removeFood', params)
					.then(response => {
						if (response.data > 0) {
							alert('菜品删除成功！');
							this.loadFoodList();
						} else {
							alert('菜品删除失败！');
						}
					})
					.catch(error => {
						console.error('删除菜品失败:', error);
						alert('删除菜品失败，请稍后重试！');
					});
			}
		},
		
		goBack() {
			this.$router.go(-1);
		},
		
		filterFoodList() {
			let filtered = this.foodList;
			
			// 按关键词搜索
			if (this.searchKeyword.trim()) {
				const keyword = this.searchKeyword.toLowerCase();
				filtered = filtered.filter(food => 
					food.foodName.toLowerCase().includes(keyword) ||
					food.foodExplain.toLowerCase().includes(keyword)
				);
			}
			
			this.filteredFoodList = filtered;
		}
	},
	components: {
		Footer
	}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
	overflow-y: auto;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 4vw;
	box-sizing: border-box;
}

.back-btn, .add-btn {
	width: 8vw;
	height: 8vw;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255,255,255,0.2);
	border-radius: 50%;
	cursor: pointer;
	font-size: 4vw;
}

/****************** 搜索部分 ******************/
.search-section {
	margin-top: 12vw;
	padding: 4vw;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.search-box {
	position: relative;
}

.search-box i {
	position: absolute;
	left: 3vw;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 3.5vw;
}

.search-box input {
	width: 100%;
	padding: 3vw 3vw 3vw 10vw;
	border: 1px solid #ddd;
	border-radius: 2vw;
	font-size: 3.5vw;
	box-sizing: border-box;
}

/****************** 菜品列表部分 ******************/
.food-list {
	padding: 4vw 4vw 15vw 4vw;
}

.empty-state {
	text-align: center;
	padding: 10vw 0;
	color: #999;
}

.empty-state i {
	font-size: 15vw;
	margin-bottom: 4vw;
}

.empty-state p {
	font-size: 3.5vw;
	margin: 0;
}

.food-item {
	background-color: #fff;
	border-radius: 2vw;
	padding: 3vw;
	margin-bottom: 3vw;
	display: flex;
	align-items: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.food-image {
	width: 15vw;
	height: 15vw;
	border-radius: 2vw;
	overflow: hidden;
	margin-right: 3vw;
	flex-shrink: 0;
}

.food-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.food-info {
	flex: 1;
	min-width: 0;
}

.food-name {
	font-size: 3.8vw;
	font-weight: 600;
	color: #333;
	margin-bottom: 1vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.food-desc {
	font-size: 3vw;
	color: #666;
	margin-bottom: 2vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.food-price {
	font-size: 3.8vw;
	color: #ff6b35;
	font-weight: 600;
}

.food-actions {
	display: flex;
	gap: 2vw;
	flex-shrink: 0;
}

.edit-btn, .delete-btn {
	width: 8vw;
	height: 8vw;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3.5vw;
}

.edit-btn {
	background-color: #4CAF50;
	color: white;
}

.delete-btn {
	background-color: #f44336;
	color: white;
}

/****************** 弹窗部分 ******************/
.dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vw;
	box-sizing: border-box;
}

.dialog {
	background-color: #fff;
	border-radius: 3vw;
	width: 100%;
	max-width: 90vw;
	max-height: 80vh;
	overflow-y: auto;
}

.dialog-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4vw;
	border-bottom: 1px solid #f0f0f0;
}

.dialog-header h3 {
	margin: 0;
	font-size: 4.2vw;
	color: #333;
}

.close-btn {
	width: 8vw;
	height: 8vw;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 6vw;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dialog-body {
	padding: 4vw;
}

.form-group {
	margin-bottom: 4vw;
}

.form-group label {
	display: block;
	font-size: 3.5vw;
	color: #333;
	margin-bottom: 2vw;
	font-weight: 600;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 3vw;
	border: 1px solid #ddd;
	border-radius: 2vw;
	font-size: 3.5vw;
	box-sizing: border-box;
}

.form-group textarea {
	height: 20vw;
	resize: vertical;
}

.price-input {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 2vw;
	overflow: hidden;
}

.price-input span {
	padding: 3vw 2vw;
	background-color: #f8f8f8;
	font-size: 3.5vw;
	color: #666;
}

.price-input input {
	border: none;
	flex: 1;
}



.dialog-footer {
	display: flex;
	gap: 3vw;
	padding: 4vw;
	border-top: 1px solid #f0f0f0;
}

.cancel-btn, .confirm-btn {
	flex: 1;
	padding: 3vw;
	border: none;
	border-radius: 2vw;
	font-size: 3.8vw;
	cursor: pointer;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}

.confirm-btn {
	background-color: #0097FF;
	color: white;
}

.confirm-btn:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}
</style> 